<template>
  <div class="content">
    <router-link class="nav-btn" to="/home"></router-link>
   
    <div class="xmbj">
      <video-player class="vjs-custom-skin"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @ready="playerReadied"
        @statechanged="playerStateChanged($event)">
      </video-player>
      <img src="" alt="" v-lazy="xmbjimg1">
      <img src="" alt="" v-lazy="xmbjimg2">
      <img src="" alt="" v-lazy="xmbjimg3">
      <img src="" alt="" v-lazy="xmbjimg4">
      <img src="" alt="" v-lazy="xmbjimg5">
      <img src="" alt="" v-lazy="xmbjimg6">
      <div class="xmbj-wrap">
        <img src="" alt="" v-lazy="xmbjdt1">
      </div>
      <img src="" alt="" v-lazy="xmbjimg8">
      <img src="" alt="" v-lazy="xmbjimg9">
      <img src="" alt="" v-lazy="xmbjimg10">
      <img src="" alt="" v-lazy="xmbjimg11">
      <img src="" alt="" v-lazy="xmbjimg12">
      <img src="" alt="" v-lazy="xmbjimg13">
      <img src="" alt="" v-lazy="xmbjimg14">
    </div>
    

    <div id="view"></div>
    <div class="next-bg">
      <router-link to="/cpqd">
        <img src="../assets/images/next-1.png" class="next-img" alt="">
      </router-link>
    </div>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {browser} from '../assets/utils';

export default {
  name: 'videopage',
  data () {
    return {
      playerOptions: {   // videojs options
          muted: false,  //是否静音
          language: 'en',
          fluid: true,
          sources: [{
            type: "video/mp4",
            src: "http://7xjv99.media1.z0.glb.clouddn.com/guoxianyu-pc.mp4"
          }],
          controlBar: {
            remainingTimeDisplay: false,
            fullscreenToggle: browser.playability.isTBS ? false : true,
            volumeMenuButton: {
              inline: false,
              vertical: true
            }
          },
          poster: require('@/assets/images/xmbj-img3.jpg'),  //视频封面，需要import 导入
        },
      "xmbjdt1" : require('@/assets/images/xmbj-dt1.gif'),
      "xmbjimg1" : require('@/assets/images/xmbj-img1.jpg'),
      "xmbjimg2" : require('@/assets/images/xmbj-img2.jpg'),
      "xmbjimg3" : require('@/assets/images/xmbj-img3.jpg'),
      "xmbjimg4" : require('@/assets/images/xmbj-img4.jpg'),
      "xmbjimg5" : require('@/assets/images/xmbj-img5.jpg'),
      "xmbjimg6" : require('@/assets/images/xmbj-img6.jpg'),
      "xmbjimg8" : require('@/assets/images/xmbj-img8.jpg'),
      "xmbjimg9" : require('@/assets/images/xmbj-img9.jpg'),
      "xmbjimg10" : require('@/assets/images/xmbj-img10.jpg'),
      "xmbjimg11" : require('@/assets/images/xmbj-img11.jpg'),
      "xmbjimg12" : require('@/assets/images/xmbj-img12.jpg'),
      "xmbjimg13" : require('@/assets/images/xmbj-img13.jpg'),
      "xmbjimg14" : require('@/assets/images/xmbj-img14.jpg'),
    }
  },
  methods: {
      ...mapActions({
        musicActionPlay: 'musicActionPlay'
      }),
 
     // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
        this.musicActionPlay(false);   // 视频开始播放，关闭全局音乐
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
        this.musicActionPlay(true);  // 视频暂停播放，播放全局音乐
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
        this.musicActionPlay(true);  // 视频播放完成，播放全局音乐 
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        // seek to 10s
        // player.currentTime(10)
        // console.log('the player is readied', player)
      }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
   }
  },
  mounted: function(){
    this.$nextTick(function(){
      if (browser.playability.isTBS) {
        let videoEl = this.$refs.videoPlayer.player.el_.getElementsByTagName('video');
        videoEl[0].setAttribute('x5-video-player-type','h5');
        videoEl[0].setAttribute('x5-video-player-fullscreen','true');
        videoEl[0].setAttribute('x5-video-orientation','landscape');
      }
    })
  },
  beforeDestroy: function(){ 
    delete this.$refs.videoPlayer.player 
  },
  components:{
    
  }
}
</script>

<style scoped>
.xmbj-head{width:100%;background:url(../assets/images/xmbj-head.jpg) no-repeat;background-size:100% 100%;}
.xmbj-h1{width:8.475rem;height:3.2rem;position:absolute;left:3.85rem;top:3.1rem;
background:url(../assets/images/xmbj-h1.png) no-repeat;background-size:100% 100%;}
.xmbj-h2{width:3.45rem;height:3.275rem;position:absolute;left:12.375rem;top:3.1rem;
background:url(../assets/images/xmbj-h2.png) no-repeat;background-size:100% 100%;}
.xmbj-h3{width:12.15rem;height:2.125rem;position:absolute;left:3.95rem;top:6.325rem;
background:url(../assets/images/xmbj-h3.png) no-repeat;background-size:100% 100%;}
.xmbj img{display: block;width:100%;}
.xmbj .lazyload{width:100%;height:140px;}
.xmbj-wrap{position:relative;width:100%;height:9.475rem;background:url(../assets/images/xmbj-img7.jpg) no-repeat;background-size:100% 100%;}
.xmbj-wrap img{position:absolute;left:1.35rem;top:0.5rem;width:15.1rem;height:8.875rem;}
.vr-wrap{width:92%;margin:0 auto;}


.hbsk-head{width:100%;background:url(../assets/images/hbsk-head.jpg) no-repeat;background-size:100% 100%;}
.hbsk-h1{width:8.1rem;height:3.075rem;position:absolute;left:3.95rem;top:3.1rem;
background:url(../assets/images/hbsk-h1.png) no-repeat;background-size:100% 100%;}
.hbsk-h2{width:3.625rem;height:3.25rem;position:absolute;left:12.375rem;top:3.1rem;
background:url(../assets/images/hbsk-h2.png) no-repeat;background-size:100% 100%;}
.hbsk-h3{width:11.95rem;height:1.8rem;position:absolute;left:3.85rem;top:6.325rem;
background:url(../assets/images/hbsk-h3.png) no-repeat;background-size:100% 100%;}
.hbsk-wrap1{width:100%;position:relative;left:0;top:0;}
.hbsk-wrap1 img[src$=".gif"]{width:7.25rem;height:4.95rem;position:absolute;left:0.96rem;top:0;}
.hbsk-wrap2 img{display: block;width:16.2rem;margin:0 auto;}
.hbsk-wrap3{position:relative;left:0;top:0;height:4.9rem;}
.hbsk-wrap3 img[src$=".gif"]:nth-child(1){position: absolute;left:1.1rem;top:0;width:8.56rem;}
.hbsk-wrap3 img[src$=".gif"]:nth-child(2){position: absolute;left:9.9rem;top:0;width:7.25rem;}

.ysmd-head{width:100%;background:url(../assets/images/ysmd-head.jpg) no-repeat;background-size:100% 100%;}
.ysmd-h1{width:8.425rem;height:2.5rem;position:absolute;left:4.075rem;top:3.75rem;
background:url(../assets/images/ysmd-h1.png) no-repeat;background-size:100% 100%;}
.ysmd-h2{width:3.125rem;height:3.075rem;position:absolute;left:12.5rem;top:3.35rem;
background:url(../assets/images/ysmd-h2.png) no-repeat;background-size:100% 100%;}
.ysmd-h3{width:12.0rem;height:1.8rem;position:absolute;left:4.075rem;top:6.4rem;
background:url(../assets/images/ysmd-h3.png) no-repeat;background-size:100% 100%;}


</style>
